<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自杀问题录入</title>
    <link rel="stylesheet" href="../../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../../assets/icons/iconfont.css">
    <link rel="stylesheet" href="../../../css/common.css">
    <link rel="stylesheet" href="../../../css/form.css">
</head>
<body class="iframe x-form-body">
<div class="layui-collapse" lay-filter="collapsePanel" style="margin-top: 10px;">
    <div class="layui-colla-item colla-off" data-id="diyy">
        <div class="layui-colla-title">数据导入</div>
        <div class="layui-colla-content">
            <!--内容区域-->
            <button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-upload-drag"></i>上传文件</button>
            <button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-download-circle"></i>下载模板
            </button>
        </div>
    </div>
</div>
<form action="" class="layui-form x-form-box" lay-filter="valForm">
    <div class="layui-collapse" lay-filter="collapsePanel" style="margin-top: 10px;">
        <div class="layui-colla-item">
            <div class="layui-colla-title">自杀问题录入卡<span class="layui-colla-subtitle">(副标题)</span></div>
            <div class="layui-colla-content layui-show">
                <div class="x-form-box">
                    <!--内容区域-->
                    <div class="case-situat">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">大单位</label>
                                <div class="layui-input-inline">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择大单位</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">自杀城市</label>
                                <div class="layui-input-inline">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择自杀城市</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="x-list-block">
                        <div class="x-block-header">
                            <span class="x-h-text">总体情况</span>
                            <span class="x-h-line"></span>
                        </div>
                    </div>
                    <div class="case-situat">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" lay-verify="pass" placeholder="请输入名称"
                                           autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">单位</label>
                                <div class="layui-input-inline">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择单位</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">自杀地点</label>
                                <div class="layui-input-inline" style=" width: 437px;margin-right: 0;">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择自杀城市</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">自杀时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="suicideTime" placeholder="yyyy-MM-dd" class="layui-input">
                                    <span><i class="layui-icon layui-icon-date"></i></span>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">发现时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="discoveryTime" placeholder="yyyy-MM-dd" class="layui-input">
                                    <span><i class="layui-icon layui-icon-date"></i></span>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">来源</label>
                                <div class="layui-input-inline" style="  width: 437px;margin-right: 0;">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择自杀城市</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">自杀动机</label>
                                <div class="layui-input-inline">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择自杀动机</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">自杀方式</label>
                                <div class="layui-input-inline">
                                    <select name="module" lay-verify="required" lay-search="">
                                        <option value="">请选择自杀方式</option>
                                        <option value="1">北京</option>
                                        <option value="2">上海</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">受伤人数</label>
                                <div class="layui-input-inline" style="width: 135px;">
                                    <input type="text" name="name" lay-verify="pass" autocomplete="off"
                                           class="layui-input">
                                    <span class="peopTool" style="left: 100px;">人</span>
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-left: -16px;">
                                <label class="layui-form-label">死亡人数</label>
                                <div class="layui-input-inline" style="width: 135px;">
                                    <input type="text" name="name" lay-verify="pass" autocomplete="off"
                                           class="layui-input">
                                    <span class="peopTool" style="left: 100px;">人</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-inline">
                                <label class="layui-form-label">简要案情</label>
                                <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea"
                                          style="width: 1053px;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="x-list-block">
                        <div class="x-block-header">
                            <span class="x-h-text">总体情况</span>
                            <span class="x-h-line"></span>
                        </div>
                    </div>
                    <div class="case-situat">
                        <ul style="display: flex;">
                            <li>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">姓名</label>
                                        <div class="layui-input-inline">
                                            <select name="username" lay-verify="required" lay-search="">
                                                <option value="">请选择姓名</option>
                                                <option value="1">北京</option>
                                                <option value="2">上海</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">年龄</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="age" lay-verify="pass" placeholder="请输入年龄"
                                                   autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">籍贯</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="native" lay-verify="pass" placeholder="请输入籍贯"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">文化</label>
                                        <div class="layui-input-inline">
                                            <input type="text" placeholder="请输入文化程度" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">民族</label>
                                        <div class="layui-input-inline">
                                            <select name="module" lay-verify="required" lay-search="">
                                                <option value="">请选择民族</option>
                                                <option value="1">北京</option>
                                                <option value="2">上海</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">性别</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="sex" value="男" title="男" checked="">
                                            <input type="radio" name="sex" value="女" title="女">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">入伍时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="enlistTime" placeholder="请选择时间" class="layui-input">
                                            <span><i class="layui-icon layui-icon-date"></i></span>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">军衔</label>
                                        <div class="layui-input-inline">
                                            <select name="module" lay-verify="required" lay-search="">
                                                <option value="">请选择军衔</option>
                                                <option value="1">北京</option>
                                                <option value="2">上海</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">职级</label>
                                        <div class="layui-input-inline">
                                            <select name="module" lay-verify="required" lay-search="">
                                                <option value="">请选择职级</option>
                                                <option value="1">北京</option>
                                                <option value="2">上海</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">职务</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="" placeholder="请选择职务" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">单位</label>
                                        <div class="layui-input-inline" style="width: 500px;position: relative;">
                                            <input type="text" name="phone" lay-verify="required|phone"
                                                   autocomplete="off"
                                                   class="layui-input">
                                            <div class="x-input-bottom layui-icon layui-icon-search"
                                                 onclick="_fn.searchInput('unit')"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">政治面貌</label>
                                        <div class="layui-input-inline">
                                            <select name="module" lay-verify="required" lay-search="">
                                                <option value="">请选择职级</option>
                                                <option value="1">北京</option>
                                                <option value="2">上海</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">身份证号</label>
                                        <div class="layui-input-inline" style="width: 500px;position: relative;">
                                            <input type="text" placeholder="请输入身份证号" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>

                                <div class="uploadpng">
                                    <img src="../../../images/person-default.png" id="headImg">
                                    <div class="layui-btn layui-btn-normal" id="uploadHead">上传照片</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="x-list-block x-list-block-full">
                        <div class="x-block-header">
                            <span class="x-h-line" style="display: block"></span>
                        </div>
                    </div>
                    <div class="sign-name">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">审核人</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" lay-verify="pass" placeholder="" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">填表人</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" lay-verify="pass" placeholder="" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">附件列表</div>
            <div class="layui-colla-content layui-show">
                <!--内容区域-->
                <table id="myTable" lay-filter="myTable"></table>
                <div class="x-list-block">
                    <div class="x-block-header">
                        <span class="x-h-line"></span>
                    </div>
                </div>
                <button class="layui-btn layui-btn-normal uploadbtn"><i
                        class="layui-icon layui-icon-upload-drag">上传附件</i></button>
                <div class="x-list-block">
                    <div class="x-block-header">
                        <span class="x-h-line"></span>
                    </div>
                </div>
                <div style="height: 25px;"></div>
                <div class="x-list-block">
                    <div class="x-block-header">
                        <span class="x-h-line"></span>
                    </div>
                </div>
                <div class="lastbtn">
                    <button lay-submit lay-filter="entrySubmit" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-list">保存</i></button>
                    <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete">删除</i></button>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="../../../../lib/layui/layui.all.js"></script>
<script src="../../../../lib/jquery-1.9.1.min.js"></script>
<script type="text/html" id="operateCol">
    <a class="x-operate-btn" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script>
    (function () {
        var tableHead = [
            {field: 'id', title: '序号', align: 'left'},
            {field: 'filename', title: '文件名称', align: 'left'},
            {field: 'time', title: '上传时间', align: 'left'},
            {field: 'operate', title: '操作', align: 'left', toolbar: '#operateCol'}
        ]
        // 表格数据模拟
        var data = [
            {uId: '1', id: '1', filename: '中央军委人员信息管理总表', time: '2016/11/03'},
            {uId: '2', id: '2', filename: '中央军委人员信息管理总表', time: '2016/11/03'},
            {uId: '3', id: '3', filename: '中央军委人员信息管理总表', time: '2016/11/03'}
        ]

        var element = layui.element;
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate;
        laydate.render({
            elem: '#suicideTime'
        })
        laydate.render({
            elem: '#discoveryTime'
        })
        laydate.render({
            elem: '#enlistTime'
        })

        var upload = layui.upload,form =layui.form;
        var uploadInst = upload.render({
            elem: '#uploadHead'
            , url: '/upload/'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#headImg').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        var _fn = {
            init: function () {
                // 初始化表单内容
                _fn.initFormVal({
                    name: '就是给个初始值而已'
                })
                form.on('submit(entrySubmit)', _fn.submitFrom);
                this.loadTable(data);
                // 面板监控
                element.on('collapse(collapsePanel)', function (data) {
                    if ($(data.title).parent('.layui-colla-item.colla-off').length <= 0) {
                        var currentItem = $(data.title).parent('.layui-colla-item')[0].dataset.id;
                        // 当前操作面板信息
                        _fn.changePanel(currentItem, data)
                    }
                });
                // 删除
                table.on('tool(myTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的DOM对象

                    if (layEvent === 'del') { //删除
                        _fn.remove(obj)
                    }
                });
            },
            /**
             * 当前操作面板 触发
             * @param {string} id 操作面板class = layui-colla-item的, data-id属性的值
             * @param data
             */
            changePanel: function (id, data) {
                console.log(id); // 当前id
                console.log(data.show); // 得到当前面板的展开状态，true或者false
                console.log(data.title); // 得到当前点击面板的标题区域DOM对象
                console.log(data.content); // 得到当前点击面板的内容区域DOM对象
            },
            /**
             * 加载表格
             * @param {array} data 表格数据
             */
            loadTable: function (data) {
                if (data) {
                    table.render({
                        elem: '#myTable'
                        , limit: 10
                        // ,url: '/demo/table/user/' // 异步操作数据接口
                        , cols: [tableHead]
                        , data: data
                    });
                }
            },
            /**
             * 删除
             */
            remove: function (obj) {
                layer.confirm('真的删除这行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    // todo:向服务端发送删除指令
                });
            },
            /**
             * 表单初始赋值
             * @param obj 要赋值对象
             */
            initFormVal: function (obj) {
                form.val('valForm', obj);
            },
            /**
             * 表单提交
             * @param data
             * @returns {boolean}
             */
            submitFrom: function (data) {
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            }
        };


        // 初始化
        _fn.init()
    })()
</script>
</body>
</html>